<template>
  <div>
    <a-layout-header class="header" style="background: #178DCC !important; padding: 0px 0px 0px 20px;
    font-size: 18px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
    color: #ffffff">
         <span ><img style="width: 110px;" :src="require('../../assets/logo.png')"></span>
         <div class="menuList">
          <span @click="toPath('ref')" :class="current == 'ref'? 'active':''">
           <a-icon type="account-book" />
          融资看板</span>
          <span @click="toPath('data')" :class="current == 'data'? 'active':''"><a-icon style="margin-right: 5px" type="bar-chart" />数据看板</span>
          <!-- <a-menu v-model="current" mode="horizontal">
            <a-menu-item key="mail"> <a-icon type="database" />融资看板</a-menu-item>
            <a-menu-item key="app"> <a-icon type="bar-chart" />数据看板</a-menu-item>
          </a-menu> -->
         </div>
         <!-- <span class="action action-full ant-dropdown-link user-dropdown-menu">
            <a-avatar class="avatar" size="small" src=""/>
            <span>欢迎您，{{userMessage.userName}}</span>
          </span>
         <span class="action">
          <a class="logout_title" href="javascript:;" @click="handleLogout">
            <a-icon type="logout"/>
            <span>&nbsp;退出登录</span>
          </a>
        </span> -->
    </a-layout-header>
    <a-layout-header class="header" style="background: transparent;
    padding: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 300px;">
        <div class="user-wrapper">
          <a-dropdown>
            <span class="action action-full ant-dropdown-link user-dropdown-menu">
              <a-avatar class="avatar" style="margin-right: 5px;" size="small" src=""/>
              <span v-if="userMessage.userName">欢迎您，{{userMessage.userName || '游客'}}</span>
              <span v-else>欢迎您</span>
            </span>
            <!-- <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
              <a-menu-item key="4" @click="updatePassword">
                <a-icon type="setting"/>
                <span>密码修改</span>
              </a-menu-item>
            </a-menu> -->
          </a-dropdown>
          <span class="action">
            <a class="logout_title" v-if="userMessage.userName" href="javascript:;" @click="handleLogout">
              <a-icon type="logout"/>
              <span>&nbsp;退出登录</span>
            </a>
            <a class="logout_title" v-else href="javascript:;" @click="toLogin">
              <a-icon type="logout"/>
              <span>&nbsp;登录</span>
            </a>
          </span>
        </div>
      </a-layout-header>
    <CompanyRefinanceList v-if="current === 'ref'"></CompanyRefinanceList>
    <Home v-if="current === 'data'" :homeStyle="homeStyle"></Home>
  </div>
</template>

<script>
  import CompanyRefinanceList from '../link/CompanyRefinanceWebList.vue'
  import Home from '../Home.vue'
export default {
  name: 'companyRefinanceList',
  components: {
    CompanyRefinanceList,
    Home
  },
  data(){
    return {
      userMessage: {},
      current: 'ref',
      homeStyle: {
        paddingTop: "23px",
        height: "calc(100vh - 43px)"
      }
    }
  },
  mounted() {
    this.userMessage = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):{};
    if (!localStorage.getItem('token')) {
      localStorage.setItem('token', 'L7R35F04Q9DYR8ZQJ3OJ9XBDXB1UBBLX')
    }
    
  },
  methods: {
    toPath(data){
      this.current = data
    },
    toLogin() {
      window.location.href="#/login";
    },
    loginOut(){
      var p = new Promise((resolve,reject)=>{
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
        resolve()
      })
      return p
    },
    handleLogout() {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要退出登录吗 ?',
        okText:"确定",
        cancelText:'取消',
        onOk() {
          return that.loginOut().then(() => {
              window.location.href="#/login";
            //window.location.reload()
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        },
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '~@assets/less/specialWeb.less';
.header{
    color: #ffffff;
  }
     .header .user-wrapper,  .top-nav-header-index .user-wrapper {
      float: right;
      height: 100%;
  }
   .header .user-wrapper .action,  .top-nav-header-index .user-wrapper .action {
    cursor: pointer;
    padding: 0 14px;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    height: 70%;
    line-height: 46px;
    margin-right:15px;
}
  /*.action {
    cursor: pointer;
    padding: 0 14px;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    height: 64px;
    line-height: 64px;
    margin-right:15px;
    position: absolute;
    right: 0px;
    top: 0px;
}*/
 .action:hover {
    background: hsla(0,0%,100%,.3);
}
.logout_title{
  color: #ffffff;

}
.logout_title i{
  color: #ffffff;
}
</style>
